<template>
	<div>
		<van-nav-bar title="脏房列表" left-arrow @click-left="$utils.back($route.path);" />
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="moreData">
			<div class="">
				<div v-for="(item, index) in roomList" :key="index" class="mlr-24 mt-24 fs-24 bg-white br-16 van-clearfix pd-24">
					<div class="flex flex-s-c pt-26">
						<div class="flex flex-v-c">
							<div class="fs-48 color-dark ml-8 lh-48">{{ item.RoomNo }}</div>
							<div class="site">{{ item.Name }}</div>
						</div>
						<div v-if="item.State === 3" class="error">已申报故障</div>
						<div v-else class="error" @click="goRepair(item)">申报故障</div>
					</div>
					<div class="mt-24 flex flex-s-c">
						<van-button class="sef-btn btn" native-type="submit" @click="GetRoomQrCode(item)">二维码开门</van-button>
						<van-button class="other-btn btn" native-type="submit" @click="cleanEnd(item)">打扫完成</van-button>
					</div>
				</div>
				<div class="no-data pb-0" v-if="blank">
					<svg-icon icon-class="no-data" />
				</div>
			</div>
		</van-list>
		<!-- 开门码弹窗 -->
		<van-dialog v-model="posterShow" class="posterDiv" :showConfirmButton="false" width="80%">
			<div class="poster_main pos-r bg-white bblr-32 bbrr-32 mb-70">
				<SvgIcon icon-class="close" class="fs-60 pos-a closecss z-out color-dark" @goPage="closeQrcode" />
				<div class="qrcode" id="qrcode" ref="qrcode"><img class="is-200" :src="qrcode" /></div>
				<div class="mt-40">将此二维码对准设备，即可开门</div>
			</div>
			<div class="flex flex-sa-c">
				<div class="flex flex-d-c flex-center flex-1">
					<div class="flex flex-center down br-54">
						<svg-icon icon-class="down" class="fs-40 color-white" />
					</div>
					<span class="fs-36 lh-40 mt-16 color-white">长按二维码保存图片</span>
				</div>
			</div>
		</van-dialog>
	</div>
</template>
<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import jrQrcode from "jr-qrcode";
import { GetBookRoomPageByStore, ProductRoomUpdateState, GetRoomQrCodeByRoomId } from 'api/teaHouse'
import SvgIcon from 'components/SvgIcon'
export default {
	components: {
		TopSearch, SvgIcon, noData
	},
	props: {
	},
	data() {
		return {
			loading: false, // 加载load
			finished: false, // 无更多数据
			blank: false, // 是否为空数据
			// 请求参数
			requestData: {
				PageIndex: 1,
				PageSize: 10,
				state: 2,
			},
			searchKey: '',
			roomList: [],
			posterShow: false, // 二维码弹窗显示
			qrcode: '', // 二维码图片地址
			ewm: '', // 点击开门码时存储所带数据生成二维码内容
		}
	},
	computed: {

	},
	watch: {

	},
	created() {
		if (this.$route.query.saleType !== undefined) {
			this.requestData.saleType = this.$route.query.saleType
		}
		this.GetBookRoomPageByStore()
	},
	mounted() {

	},
	methods: {

		// 重新请求
		reset() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 10
			this.requestData.State = 2
			this.roomList = []
			// 获取列表
			this.GetBookRoomPageByStore()
		},
		// 上拉加载更多
		moreData() {
			this.requestData.PageIndex = this.requestData.PageIndex + 1
			this.GetBookRoomPageByStore()
		},
		GetBookRoomPageByStore() {
			const _this = this
			_this.roomList = []
			_this.loading = true
			GetBookRoomPageByStore(this.requestData).then(res => {
				if (res.Data) {
					if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
						_this.finished = true
					} else {
						_this.finished = false
					}
					_this.loading = false
					if (res && res.Data && res.Data.Data.length > 0) {
						res.Data.Data.forEach(item => {
							item.show = false
							_this.roomList.push(item)
						})
					}
					_this.totalAmout = res.Data.TotalAmout
					_this.scollRequest = true
					if (_this.scollTop > 0) {
						document.body.scrollTo(0, _this.scollTop)
					}
				} else {
					_this.loading = false
					_this.finished = true
				}
			})
		},

		search() {
			this.resetParams()
			this.requestData.searchKey = this.searchKey
			this.GetBookRoomPageByStore()
		},

		resetParams() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 10
			this.roomList = []
			this.totalAmout = 0
			this.scollRequest = true
			this.scollTop = 0
			this.end = false
		},
		// 开门码
		GetRoomQrCode(item) {
			console.log(item, "打印")
			this.infos = item
			GetRoomQrCodeByRoomId({ roomId: item.ID }).then(res => {
				if (res.State == 0) {
					return
				}
				this.ewm = res.Data
				this.$nextTick(() => {
					let imgBase64 = jrQrcode.getQrBase64(this.ewm, {//生成二维码
						padding: 10,   // 二维码四边空白（默认为10px）
						width: 200,  // 二维码图片宽度（默认为256px）
						height: 200,  // 二维码图片高度（默认为256px）
						correctLevel: QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
						reverse: false,        // 反色二维码，二维码颜色为上层容器的背景颜色
						background: "#ffffff",    // 二维码背景颜色（默认白色）
						foreground: "#000000"     // 二维码颜色（默认黑色）
					});  //options为配置对象，支持以下配置参数：
					this.qrcode = imgBase64
				})
				this.posterShow = true
			})
		},
		// 为了防止重复生成二维码，使用置空
		closeQrcode() {
			this.posterShow = false
			setTimeout(function () {
				this.qrcode = ''
			}, 150)
		},
		//清扫完成
		cleanEnd(item) {
			ProductRoomUpdateState(item.ID, 0).then(res => {
				if (res) {
					this.reset()
					this.$toast('清扫完成')
				}
			})
		},
		//申报故障
		goRepair(item) {
			ProductRoomUpdateState(item.ID, 4).then(res => {
				if (res) {
					this.reset()
					this.$toast('申报故障成功')
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.btn {
	color: #fff;
	font-size: 28px;
	border-radius: 4px;
	width: 302px;
	height: 72px;
	line-height: 72px;
	text-align: center;
}

.sef-btn {
	background: #434C67;
	height: 64px;
	line-height: 64px;
	border: 1px solid #666666 !important;
}

.other-btn {
	@include bg-primary;
	height: 64px;
	line-height: 64px;
	border: 1px solid transparent !important;
}

.error {
	border: 1px solid #333;
	padding: 5px 15px;
	border-radius: 4px;
}

.site {
	width: 112px;
	height: 44px;
	line-height: 44px;
	background: rgba(185, 192, 208, .1);
	border-radius: 8px;
	text-align: center;
	color: #5D6C85;
	margin-left: 28px;
}

.closecss {
	top: 20px;
	right: 16px;
	width: 50px;
	height: 50px;
	position: absolute;
}

.poster_main {
	text-align: center;
	padding: 62px 60px 62px;

	img {
		width: 450px;
		height: 450px;
	}

	p {
		font-size: 28px;
		color: #F54F1B;
		padding: 30px 0;
		font-weight: 500;
	}

	div {
		font-size: 28px;
		color: #333;
		font-weight: 400;
	}
}

/deep/.posterDiv {
	background-color: transparent;
}

.down {
	width: 96px;
	// height: 96px;
	// background: #8AC24C;
}
</style>
